window.onload = function () {
	var btn1 = document.getElementById("now-pay");
	var btn2 = document.getElementById("i-know");
	var front2 = document.getElementById("front");
	var back2 = document.getElementById("back");
	var hd2 = document.getElementById("hd");
	var local2 = document.getElementById("local");
	var order2 = document.getElementById("order");
	var hr1 = document.getElementById("order-hr");
	var hr2 = document.getElementById("infor-hr1");
	var hr3 = document.getElementById("infor-hr2");
	var hr4 = document.getElementById("foot")
	var informa = document.getElementById("information");
	var pay = document.getElementById("payment");
	btn1.onclick = function () {
		hd2.style.background = "rgb(178, 178, 178)";
		local2.style.background = "rgb(178, 178, 178)";
		order2.style.background = "rgb(178, 178, 178)";
		informa.style.background = "rgb(178, 178, 178)";
		pay.style.background = "rgb(178, 178, 178)";
		hr1.style.background = "rgb(171, 171, 171)";
		hr2.style.background = "rgb(171, 171, 171)";
		hr3.style.background = "rgb(171, 171, 171)";
		hr4.style.background = "rgb(171, 171, 171)";
		front2.style.background = "rgb(171, 171, 171)";
		back2.style.zIndex = 2;
	}
	btn2.onclick = function () {
		hd2.style.background = "rgb(255, 255, 255)";
		local2.style.background = "rgb(255, 255, 255)";
		order2.style.background = "rgb(255, 255, 255)";
		informa.style.background = "rgb(255, 255, 255)";
		pay.style.background = "rgb(255, 255, 255)";
		hr1.style.background = "rgb(245, 245, 245)";
		hr2.style.background = "rgb(245, 245, 245)";
		hr3.style.background = "rgb(245, 245, 245)";
		hr4.style.background = "rgb(245, 245, 245)";
		front2.style.background = "rgb(245, 245, 245)";
		back2.style.zIndex = 0;
	}
}